<template>
  <!--  鄄城 2-->
  <div>
    <div :class="{'scaleMap':(clientWidth<1730)}" class="regionMap_wrap5 position-absolute w-100" style="">
      <ul ref="regionMap" class="regionMap p_absolute">
        <li ref="stroke" class="p_absolute" :class="{'active':strokeIndex==index}" v-for="index in 1" @mouseenter="enter(regions[index-1],index)" @mouseleave="leave" @mousemove="updateXY">
        <!--  <div ref="icon">
            <i class="iconfont p_absolute" :class="iconObj[iconIndexs[index-1][iconIndex-1]]" v-for="iconIndex in 5"></i>
          </div>-->
<!--          {{regionNames[index-1]}}-->
        </li>
        <div v-show="!showPopover" class="regionInfo p_absolute" ref="regionInfo2" style="top:0px;right:100px;">
          <device-statistics :region="region"></device-statistics>
        </div>
      </ul>
    </div>
    <!--放大缩小-->
    <ul class="region_scale d-flex align-items-center" style="position:absolute;">
      <li class="mr-3" @click="scaleMapFun('minus')"><i class="iconfont icon-scale-minus"></i></li>
      <li @click="scaleMapFun('add')"><i class="iconfont icon-scale-add"></i></li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'
  import deviceStatistics from './device-statistics'
  export default {
    components: {deviceStatistics},
    props: {
      regions:{
        type:Array,
        default:[]
      },

    },
    data() {
      return {
        strokeIndex:1,
        region:this.regions[0],
        regionNames:['','','','','新区','三工区','四工区','五工区'],
        iconIndexs:[],
        iconObj:{1:'icon-ecc-alarm',2:'icon-off',3:'icon-line',4:'icon-off',5:'icon-off',6:'icon-line'},
        region:{Ecc:{},Pole:{}},
        showPopover:false,
        scaleMap:1
      }
    },
    watch: {
      strokeIndex(index){
        this.getDevInfo(this.regions[index-1])
      },
      clientWidth(){
        this.scaleMap=0.7
     }
    },
    computed: {
      ...mapState({
        clientWidth: state => state.comm.clientWidth,
        clientHeight: state => state.comm.clientHeight,
      })
    },
    methods: {
      enter(item,index){
        this.strokeIndex=index
        this.$store.commit('timer/clearTimer2')
        this.getDevInfo(item)
        this.showPopover = true
        this.$emit('updateShowPopover',true)
      },
      leave:function(){
        this.showPopover = false
        this.$emit('updateShowPopover',false)
        // this.setStrokeTimer()
        this.$refs.regionInfo2.style.top = '0px'
        this.$refs.regionInfo2.style.right = '100px'
      },
      updateXY(event){
        this.$emit('updateXY',{event:event,region:this.region})
      },
      getDevInfo(item){
        api.fetchSimple('/ViewInfo/DevCountInfo',{regionIds:[item.Id]})//regionIds:[item.Id] 大屏内蒙古区域新建有问题  大屏1地图就一个模块 鼠标悬浮后还显示总的
            .then(r=>{
              this.region=r
            })
      },
      setStrokeTimer(){
        let _this=this
        this.$store.commit('timer/setTimer2',setInterval(()=>{
          _this.strokeIndex++
          if (_this.strokeIndex > 1) {
            _this.strokeIndex = 1
          }
          _this.$refs.regionInfo2.style.top = _this.$refs.stroke[_this.strokeIndex-1].offsetTop+50 + 'px'
          _this.$refs.regionInfo2.style.left = _this.$refs.stroke[_this.strokeIndex-1].offsetLeft +70+ 'px'
          _this.showIcon=false
          setTimeout(()=>{
            _this.showIcon=true
          },500)
        },8000))
      },
      setIconIndexs(){
        //1-6
        this.iconIndexs.push([1,
          parseInt(Math.random() * 5 + 2, 10),
          parseInt(Math.random() * 5 + 2, 10),
          parseInt(Math.random() * 5 + 2, 10),
          parseInt(Math.random() * 5 + 2, 10)])
      },
      setIcons(){
        let icons=this.$refs.icon
        let strokes={
          'stroke1':[[250,255],[220,200],[280,170],[180,300],[140,350]]
        }
        for(let i=0;i<icons.length;i++){
          let childrens=icons[i].children
          for(let j=0;j<childrens.length;j++){
            childrens[j].style.top=strokes['stroke'+(i+1)][j][0]+'px'
            childrens[j].style.left=strokes['stroke'+(i+1)][j][1]+'px'
          }
        }
      },
      scaleMapFun(type){
        if(type=='minus'){
          this.scaleMap=this.scaleMap-0.1
          this.$refs.regionMap.style.transform=`scale(${this.scaleMap})`
        }else {
          this.scaleMap=this.scaleMap+0.1
          this.$refs.regionMap.style.transform=`scale(${this.scaleMap})`
        }
      },
    },
    created() {
      // this.setStrokeTimer()
      // this.setIconIndexs()
      this.getDevInfo(this.regions[0])
    },
    mounted() {
      let _this=this
      // _this.setIcons()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" >
  .regionMap_wrap5{
    &.scaleMap{width:600px;transform:scale(0.8);}
    .regionMap{margin-top:-70px;height:350px;width:100%;
      // &.scaleMap{transform:scale(0.6)}
      &>li{
        display:flex;justify-content:center;align-items:center;font-size:12px;color:#27CCF8;font-weight:600;
        &:hover,&.active{color:#094353;font-size:14px;}
      }
      &>li:nth-child(1){top:60px;left:160px;width: 600px;height: 460px;background: url("~assets/image/dashboard/map6/Stroke1.png") no-repeat;background-size:contain;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map6/Stroke1_1.png");background-size:contain;}
      }
    }
  }
</style>
